<template>
<div>

    <home-header></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekend :list="weekendList"></home-weekend>
</div>
</template>

<script>
import HomeHeader from './components/header'
import HomeSwiper from './components/swiper'
import HomeIcons from './components/icons'
import HomeRecommend from './components/recommend.vue'
import HomeWeekend from './components/weekend.vue'
import axios from 'axios'
import {mapState} from 'vuex'
    export default {
        data(){
            return{
               lastCity:'',
               swiperList: [],
               iconList: [],
               recommendList: [],
               weekendList: []
            }
        },
        computed:{
            ...mapState(['city'])
        },
     components:{
         HomeHeader,
         HomeSwiper,
         HomeIcons,
         HomeRecommend,
         HomeWeekend
     },
     mounted(){
         this.lastCity = this.city
         this.getHomeInfo()
     },
     methods:{
           getHomeInfo(){
               axios.get('/api/index.json?city='+this.city)
                .then(this.getHomeInfoSucc)
           },
           getHomeInfoSucc(res){
                 console.log(res.data)
                 res = res.data
                if(res.ret&&res.data){
                     const data = res.data
                     this.swiperList = data.swiperList
                     this.iconList = data.iconList
                     this.recommendList = data.recommendList
                     this.weekendList = data.weekendList
                }
           }
     },
     activated(){
               if(this.lastCity!==this.city){
                   this.lastCity = this.city
                   this.getHomeInfo()
               }
     }
    }
</script>

<style  scoped>

</style>